<template>
  <div class="main-view">
    <div>
      <el-carousel  height="700px">
        <el-carousel-item v-for="item in imageBox" :key="item" class="item">
          <img :src="item.url" class="image" >
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-card class="card">
      <el-row v-if="table === 1">
        <el-col :span="12">
          <el-menu class="menu">
            <el-menu-item index="1" class="menu-item1" @click="table = 1, step = 0">机票预定</el-menu-item>
            <el-menu-item index="2" class="menu-item" @click="table = 2, step = 2">行程服务</el-menu-item>
            <el-menu-item index="3" class="menu-item" @click="table = 3,step = 4">附加服务</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="12">
          <div class="content" v-if="step === 0">
            <el-header class="header">
              <el-button class="button1" @click="step = 0">单程</el-button>
              <el-button class="button2" @click="step = 1">往返</el-button>
              <el-button class="button3">多程</el-button>
            </el-header>
            <el-main class="main">
              <el-form>
                <el-form-item class="form-item">
                  <el-select
                      v-model="departureCity"
                      filterable
                      placeholder="出发城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-select
                      v-model="arrivalCity"
                      filterable
                      placeholder="到达城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer>
              <el-form-item>
                <el-button type="primary" @click="searchOne" class="find-button">查询</el-button>
              </el-form-item>
            </el-footer>
          </div>
          <div class="content" v-if="step === 1">
            <el-header class="header">
              <el-button class="button4" @click="step = 0">单程</el-button>
              <el-button class="button5" @click="step = 1">往返</el-button>
              <el-button class="button3">多程</el-button>
            </el-header>
            <el-main class="main">
              <el-form>
                <el-form-item class="form-item">
                  <el-select
                      v-model="departureCity"
                      filterable
                      placeholder="出发城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-select
                      v-model="arrivalCity"
                      filterable
                      placeholder="到达城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item1">
                  <el-date-picker type="date" v-model="date" placeholder="去程日期"></el-date-picker>
                </el-form-item>
                <el-form-item class="form-item2">
                  <el-date-picker type="date" v-model="date1" placeholder="返程日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer>
              <el-form-item>
                <el-button type="primary" @click="searchTwo" class="find-button">查询</el-button>
              </el-form-item>
            </el-footer>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="table === 2">
        <el-col :span="12">
          <el-menu class="menu">
            <el-menu-item index="1" class="menu-item" @click="table = 1, step = 0">机票预定</el-menu-item>
            <el-menu-item index="2" class="menu-item1" @click="table = 2, step = 2">行程服务</el-menu-item>
            <el-menu-item index="3" class="menu-item" @click="table = 3,step = 4">附加服务</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="12">
          <div class="content" v-if="step === 2">
            <el-header class="header">
              <el-button class="button6" @click="step = 2">办理值机</el-button>
              <el-button class="button7" @click="step = 3">航班动态</el-button>
            </el-header>
            <el-main class="main">
              <el-form>
                <el-form-item class="form-item">
                  <el-input v-model="departure" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-input v-model="destination" placeholder="票号"></el-input>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-input v-model="destination" placeholder="手机号"></el-input>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer>
              <el-form-item>
                <el-button type="primary" @click="goFly" class="find-button">办理值机</el-button>
              </el-form-item>
            </el-footer>
          </div>
          <div class="content" v-if="step === 3">
            <el-header class="header">
              <el-button class="button8" @click="step = 2">办理值机</el-button>
              <el-button class="button9" @click="step = 3">航班动态</el-button>
            </el-header>
            <el-main class="main">
              <el-form>
                <el-form-item class="form-item">
                  <el-select
                      v-model="departureCity"
                      filterable
                      placeholder="出发城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-select
                      v-model="arrivalCity"
                      filterable
                      placeholder="到达城市">
                    <el-option
                        v-for="item in cities"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                  <el-date-picker type="date" v-model="date" placeholder="去程日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer>
              <el-form-item>
                <el-button type="primary" @click="searchOne" class="find-button">查询航班</el-button>
              </el-form-item>
            </el-footer>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="table === 3">
        <el-col :span="12">
          <el-menu class="menu">
            <el-menu-item index="1" class="menu-item" @click="table = 1, step = 0">机票预定</el-menu-item>
            <el-menu-item index="2" class="menu-item" @click="table = 2, step = 2">行程服务</el-menu-item>
            <el-menu-item index="3" class="menu-item1" @click="table = 3,step = 4">附加服务</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="12">
          <div v-if="step === 4">
            <el-button class="icon1" icon="Position" size="large" circle></el-button>
            <el-button type="text" class="Button1">值机选座</el-button>
            <el-button class="icon2" icon="Key" size="large" circle></el-button>
            <el-button type="text" class="Button2">机上Wi-Fi</el-button>
            <el-button class="icon3" icon="KnifeFork" size="large" circle></el-button>
            <el-button type="text" class="Button3">美食预定</el-button>
            <el-button class="icon4" icon="Ticket" size="large" circle></el-button>
            <el-button type="text" class="Button4">自助退票</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "MainView",
  data() {
    return {
      date: '',
      table: 1,
      step: 0,
      date1: '',
      departureCity: '',
      arrivalCity: '',
      cities: [],
      imageBox: [
        {url: require("@/assets/advertising1.png")},
        {url: require("@/assets/advertising2.png")},
        {url: require("@/assets/advertising3.png")}
      ]
    };
  },mounted() {
    this.fetchCities();
  },
  methods: {
    fetchCities() {
      axios.get('/cities')
          .then(response => {
            this.cities = response.data;
          })
          .catch(error => {
            console.error('获取城市列表失败', error);
            ElMessage.error('获取城市列表失败');
          });
    },
    searchOne() {
      if(this.departureCity === '' || this.arrivalCity === '' || this.date === ''){
        ElMessage.error('请填写完整信息');
        return;
      }
      this.$router.push({ path: '/search', query: { departureCity: this.departureCity, arrivalCity: this.arrivalCity, date: this.date , step: 0} });
    },
    searchTwo() {
      if(this.departureCity === '' || this.arrivalCity === '' || this.date === '' || this.date1 === ''){
        ElMessage.error('请填写完整信息');
        return;
      }
      this.$router.push({ path: '/search', query: { departureCity: this.departureCity, arrivalCity: this.arrivalCity, date: this.date, date1: this.date1, step: 1 } } );
    }
  }
};

</script>

<style scoped>
.main-view {
  height: 100vh;
  width: 100%;
  font-family: 'Arial', sans-serif;
  padding: 20px;
  background-color: #ffffff;
}
.card{
  position: relative;
  background-color: #f2f2f2;
  padding: 20px;
  height: 300px;
  width: 400px;
  top: -600px;
  left: 300px;
  border-radius: 15px;
}
.menu {
  background-color: #4978c9;
  height: 100vh;
  width: 105px;
  position: relative;
  left: -50px;
  top: -40px;
  z-index: 10;
}
.menu-item {
  background-color: #4978c9;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  left: 5px;
  position: relative;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
.menu-item1 {
  background-color: #f2f2f2;
  color: #4978c9;
  text-align: center;
  line-height: 30px;
  left: 5px;
  position: relative;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
.item {
  text-align: center;
  height: 100vh;
  width: 100vw;
}
.image {
  height: 100vh;
  width: 80vw;
}
.main{
  position: relative;
  top: -20px;
  left: -70px;
  width:250px;
}
.button1 {
  position: absolute;
  top: -10px;
  left: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.button2{
  position: absolute;
  top: -10px;
  left: 170px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button3{
  position: absolute;
  top: -10px;
  left: 250px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button4{
  position: absolute;
  top: -10px;
  left: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button5{
  position: absolute;
  top: -10px;
  left: 170px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.button6{
  position: absolute;
  top: -10px;
  left: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.button7{
  position: absolute;
  top: -10px;
  left: 200px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button8{
  position: absolute;
  top: -10px;
  left: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button9{
  position: absolute;
  top: -10px;
  left: 200px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.icon1{
  position: absolute;
  top: 20px;
  left: 135px;
  font-size: 30px;
  color: #0b536f;
  background-color: #27cafc;
}
.Button1{
  position: absolute;
  top: 60px;
  left: 115px;
  font-size: 14px;
  color: #0b536f;
  background-color: transparent;
}
.icon2{
  position: absolute;
  top: 20px;
  left: 275px;
  font-size: 30px;
  color: #0b536f;
  background-color: #27cafc;
}
.Button2{
  position: absolute;
  top: 60px;
  left: 260px;
  font-size: 14px;
  color: #0b536f;
  background-color: transparent;
}
.icon3{
  position: absolute;
  top: 170px;
  left: 125px;
  font-size: 30px;
  color: #0b536f;
  background-color: #27cafc;
}
.Button3{
  position: absolute;
  top: 210px;
  left: 115px;
  font-size: 14px;
  color: #0b536f;
  background-color: transparent;
}
.icon4{
  position: absolute;
  top: 170px;
  left: 275px;
  font-size: 30px;
  color: #0b536f;
  background-color: #27cafc;
}
.Button4{
  position: absolute;
  top: 210px;
  left: 265px;
  font-size: 14px;
  color: #0b536f;
  background-color: transparent;
}
.form-item{
  top:-25px;
  position: relative;
  margin-top: 25px;
  left: -20px;
}
.form-item1{
  top:-25px;
  width: 100px;
  position: relative;
  margin-top: 25px;
  left: -20px;
}
.form-item2{
  top: 109px;
  width: 100px;
  position: absolute;
  margin-top: 25px;
  left: 120px;
}
.find-button{
  position: relative;
  top: -30px;
  left: -50px;
  width:200px;
  height: 40px;
  border-radius: 20px;
  background-color: #d46009;
  color: #ffffff;
}
</style>
